<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<style type="text/css">
		body{
			background: lightblue;
			overflow: hidden;
		}
		.fish{
			width: 180px;
			height: 127px;
			/* border: 1px solid; */
			position: absolute;
			background: url(images/fish8.png) no-repeat left top;
			animation: fish 0.8s steps(8) infinite;
		}
		@keyframes fish{
			from{background-position: left 0;}
			to{background-position: left -1008px;}
		}
		.fish1{
			width: 180px;
			height: 127px;
			position: absolute;
			left: 0;
			top: 0;
			animation: fish1 25s infinite linear;
		}
		@keyframes fish1{
			0%{transform: translate(0);}
			25%{transform: translate(800px) rotate(45deg);}
			75%{transform: translate(500px,700px) rotate(253deg);}
			100%{transform: translate(0) rotate(360deg);}
		}
		
		.shark{
			width: 508px;
			height: 245px;
			position: absolute;
			/* border: 1px solid; */
			background: url(images/shark1.png) no-repeat;
			animation: shark 0.8s steps(8) infinite;
		}
		@keyframes shark{
			from{ background-position: left 0;}
			to{background-position: left -2160px;}
		}
		.shark1{
			width: 508px;
			height: 245px;		
			animation: shark1 20s infinite linear;
		}
		@keyframes shark1{
			from{transform: translateX(-600px);}
			to{transform: translateX(2000px);}
		}
	</style>
	<body>
		<!-- 小鱼 -->
		<div class="fish1">
			<div class="fish"></div>
		</div>
		<!-- 鲨鱼 -->
		<div class="shark1">
			<div class="shark">
				
			</div>
		</div>
	</body>
</html>